<template>
  <div class="class_list">
    <van-nav-bar title="分类商品" left-arrow @click-left="$router.back()" />
    <van-empty v-if="list.length==0" description="暂无数据" />
    <div class="count" v-else>
      <people-cart
        v-for="(item, index) in list"
        :key="index"
        :itemObj="item"
         @click="$router.push(`/detail/${item.id}`)"
      ></people-cart>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { getGoods } from "../../api/home/home";
import peopleCart from "../../components/peopleCart.vue";
export default {
  components: { peopleCart },
  setup() {
    const route = useRoute();
    let id = route.params.id;
    // console.log(id);
    const data = reactive({
      list: [], // 展示的数据
    });
    getGoods({ id: id }).then((res) => {
      // res 返回给我们的是所有的商品分类信息
      data.list = res.data.filter((item) => item.categoryId == id);
      // console.log(data.list);
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
:deep(.van-nav-bar .van-icon) {
  color: #000;
}
.class_list {
  height: 100%;
}
.count {
  height: calc(100% - 46px);
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  justify-content: space-between;
}
</style>